<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <script src="./bower_components/angular/angular.js"></script>
    <title>scope</title>
</head>
<body>
    <div ng-app="scopeApp">
        <div ng-controller="firstCtrl">
            <input type="text" ng-model="data.message"/>
                1:{{data.message}}
            <div ng-controller="secondCtrl">
                <input type="text" ng-model="data.message"/>
                2:{{data.message}}
            </div>
        </div>

        <div ng-controller="thirdCtrl">
            <input type="text" ng-model="data.message"/>
            3:{{data.message}}
        </div>
    </div>
    <script>
        var scopeApp = angular.module('scopeApp',[]);
        scopeApp.controller('firstCtrl',function($scope){
            console.log($scope);
        });

        scopeApp.controller('secondCtrl',function($scope){
            console.log($scope);
            $scope.message = "secondCtrl";
        });

        scopeApp.controller('thirdCtrl',function($scope){
            console.log($scope);
            $scope.message = "thirdCtrl";
        });

    </script>


</body>
</html>